<template>
 <div class="chanpinye">
  <div class="zhongxin">

    <ul>
    <li @click="goIndex" class="tiaozhuan">首页</li>
    <li>>{{name}}</li>
  </ul>
<GoodCard v-for="shang in shangpin" :key="shang.id" :good="shang"></GoodCard>

  </div>
 
 
 </div>
</template>

<script>
//引入请求回来的商品列表数据,提取对应id分类的商品信息
import {getGoods} from "@/assets/request.js";

//引入单个商品组件，把准备好的数组遍历进去，绑定id 并传参
import GoodCard from "@/components/GoodCard.vue"

export default{
    name: "product",

    //组件数据
    data(){
      return {
        //准备一个空数组接收请求回来的数据
        shangpin:[],
        name:"",
      };
    },

    //方法---路由跳转
    methods:{
      goIndex(){
        this.$router.push({
          name:"Index",
        })
      }
    },

    //生命钩子---发送ajax请求
    async mounted() {
        let res = await getGoods({
            //写上自己的项目id
            project_id: 267,
            //把收到的对应分类的商品id提取出来赋值给classify_id，获得对应分类的所有商品信息
            classify_id: this.$route.params.id,
        });
        console.log(res);
        //提取对应id分类的所有商品信息数组
        this.shangpin = res.data.result.rows;
        //从提取的数组里面找到分类名，动态渲染页面分类名字
        this.name= res.data.result.rows[0].s_classify.name
    },
    
    //注册组件
    components: { GoodCard }
}

</script>

<style lang='scss' scoped>
.chanpinye{
  width: 100%;
  background-color: gainsboro;

  .zhongxin{
    width: 1400px;
    // border: 1px solid black;
    margin-left: 56px;
    display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

    ul{
    width: 100%;
    padding-left: 20px;
    letter-spacing: 10px;
    color: grey;
    font-size: 17px;
    display: flex;

    li{
      &:nth-of-type(1){
        font-weight: bold;
        color: #333333;
      }
    }

  }

  .tiaozhuan{
    &:hover{
      cursor: pointer;
    }
  }


  }

  
 
}
</style>
